<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <image src="/static/search-icon.png" class="search-icon"></image>
        <input type="text" placeholder="搜索助农商品" @focus="goSearch" />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner" indicator-dots autoplay interval="3000">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 分类导航 -->
    <view class="category">
      <view class="category-item" v-for="(item, index) in categories" :key="index">
        <image :src="item.icon" class="category-icon"></image>
        <text class="category-text">{{ item.name }}</text>
      </view>
    </view>

    <!-- 助农推荐 -->
    <view class="section-title">助农精选</view>
    <view class="product-list">
      <view class="product-item" v-for="(item, index) in products" :key="index" @click="goDetail(item.id)">
        <image :src="item.image" class="product-img"></image>
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-desc">{{ item.desc }}</text>
          <view class="price-row">
            <text class="price">¥{{ item.price }}</text>
            <text class="original-price">¥{{ item.originalPrice }}</text>
          </view>
          <view class="farmer-info">
            <image src="/static/farmer-icon.png" class="farmer-icon"></image>
            <text class="farmer-name">{{ item.farmerName }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const banners = ref([
  { image: '/static/banner1.jpg' },
  { image: '/static/banner2.jpg' },
  { image: '/static/banner3.jpg' }
]);

const categories = ref([
  { name: '蜂蜜', icon: '/static/category-honey.png' },
  { name: '水果', icon: '/static/category-fruit.png' },
  { name: '蔬菜', icon: '/static/category-vegetable.png' },
  { name: '粮油', icon: '/static/category-grain.png' },
  { name: '干货', icon: '/static/category-dry.png' }
]);

const products = ref([
  {
    id: 1,
    name: '农家百花蜜',
    image: '/static/product-honey.jpg',
    price: 49.9,
    originalPrice: 59.9,
    desc: '天然无添加，深山蜜源',
    farmerName: '李大叔蜂场'
  },
  {
    id: 2,
    name: '有机草莓',
    image: '/static/product-strawberry.jpg',
    price: 29.9,
    originalPrice: 39.9,
    desc: '当日现摘，新鲜直达',
    farmerName: '张婶果园'
  },
  {
    id: 3,
    name: '小油菜',
    image: '/static/product-vegetable.jpg',
    price: 9.9,
    originalPrice: 12.9,
    desc: '绿色种植，无农药',
    farmerName: '王大爷菜园'
  }
]);

// 页面方法
const goSearch = () => {
  uni.navigateTo({ url: '/pages/search/index' });
};

const goDetail = (id) => {
  uni.navigateTo({ url: `/pages/product/detail?id=${id}` });
};
</script>

<style scoped>
.container {
  padding-bottom: 100rpx; /* 底部导航栏高度 */
}

.search-bar {
  padding: 20rpx;
  background-color: #28a745;
}

.search-box {
  display: flex;
  align-items: center;
  height: 80rpx;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 30rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.banner {
  height: 400rpx;
}

.category {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 0;
  background-color: #fff;
}

.category-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.category-text {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #333;
}

.section-title {
  padding: 20rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  background-color: #f8f8f8;
}

.product-list {
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  width: 48%;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.product-info {
  padding: 20rpx;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-row {
  display: flex;
  align-items: baseline;
  margin-top: 10rpx;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #e60012;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.farmer-info {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.farmer-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}

.farmer-name {
  font-size: 24rpx;
  color: #666;
}
</style>